<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>在线管理</title>
<link rel="stylesheet" type="text/css" href="{APP_THEME_DIR}/js/plugins/webuploader/css/style.css?v=1.0">
<link rel="stylesheet" href="{APP_THEME_DIR}/js/plugins/ztree/css/iframe.css?v=1.0">
<link rel="stylesheet" href="{APP_THEME_DIR}/js/plugins/ztree/css/zTreeStyle/zTreeStyle.css?v=1.0" type="text/css">
<link rel="stylesheet" href="{APP_THEME_DIR}/layui/css/layui.css?v=v2.5.4">
<link rel="stylesheet" href="{APP_THEME_DIR}/font-awesome/css/font-awesome.min.css?v=v4.7.0" type="text/css">
<link rel="stylesheet" href="{APP_THEME_DIR}/css/comm.css?v=v2.0.0">
<style type="text/css">
.ztree li{line-height:22px;}
.ztree .node_name{font-size:13px !important;}
.hover{line-height:22px;}
</style>
</head>
<body>
<!--定义部分地址方便JS调用-->
<div style="display: none">
	<span id="controller" data-controller="{C}"></span>
	<span id="url" data-url="{URL}"></span>
	<span id="preurl" data-preurl="{fun=url('/admin',false)}"></span>
	<span id="sitedir" data-sitedir="{SITE_DIR}"></span>
	<span id="mcode" data-mcode="{$get.mcode}"></span>
</div>
<div class="ui-layout-west area manage-area" id="manage_area">
    <div id="tree" class="ztree"></div>
</div>
<div class="ui-layout-center" style="position: relative; padding-bottom:80px;">
    <div style="position: absolute; bottom:15px; left:20px;">
        <button type="button" class="layui-btn uploads watermark" data-des="pics">
            <i class="layui-icon">&#xe67c;</i>上传多图
        </button>
    </div>
    <ul class="tabs" style="position: absolute; bottom:15px; right:40px;">
        <li id="saveBtn">确定使用</li>
    </ul>
    <iframe name="content_body" id="content_body" src="{url./admin/Media/get_images_path/num/'.[$info.num].'/func/'.[$info.func].'}" width="100%" height="100%" frameborder="0"></iframe>
</div>
<script type="text/javascript" src="{APP_THEME_DIR}/js/jquery-1.12.4.min.js?v=1.0"></script>
<script src="{APP_THEME_DIR}/js/jquery.layout-latest.min.js?v=1.0"></script>
<script type="text/javascript" src="{APP_THEME_DIR}/js/plugins/ztree/js/jquery.ztree.core.min.js?v=1.0"></script>
<script type="text/javascript" src="{APP_THEME_DIR}/layui/layui.all.js?v=v2.5.4"></script>
<script type="text/javascript">
    var myLayout;
    jQuery(document).ready(function () {
        myLayout = jQuery("body").layout({
        /*  全局配置 */
            closable:                   true    /* 是否显示点击关闭隐藏按钮*/
        ,   resizable:                  true    /* 是否允许拉动*/
        ,   maskContents:               true    /* 加入此参数，框架内容页就可以拖动了*/
        /*  顶部配置 */
        ,   north__spacing_open:        0       /* 顶部边框大小*/
        /*  底部配置 */
        ,   south__spacing_open:        0       /* 底部边框大小*/
        /*  some pane-size settings*/
        ,   west__minSize:              200     /*左侧最小宽度*/
        ,   west__maxSize:              500     /*左侧最大宽度*/
        /*  左侧配置 */
        ,   west__slidable:             false
        ,   west__animatePaneSizing:    false
        ,   west__fxSpeed_size:         "slow"  /* 'fast' animation when resizing west-pane*/
        ,   west__fxSpeed_open:         1000    /* 1-second animation when opening west-pane*/
        ,   west__fxSettings_open:      { easing: "easeOutBounce" } // 'bounce' effect when opening*/
        ,   west__fxName_close:         "none"  /* NO animation when closing west-pane*/
        ,   stateManagement__enabled:   false   /*是否读取cookies*/
        ,   showDebugMessages:          false 
        }); 
    });

    var zNodes = {$zNodes};

    var setting = {
        view:{
            dblClickExpand:false
            ,showLine:true
        },
        data:{
            simpleData:{
                enable:true
            }
        },
        callback:{
            beforeExpand:beforeExpand
            ,onExpand:onExpand
            ,onClick:onClick
        }
    };
    var curExpandNode=null;
    function beforeExpand(treeId,treeNode) {
        var pNode=curExpandNode?curExpandNode.getParentNode():null;
        var treeNodeP=treeNode.parentTId?treeNode.getParentNode():null;
        var zTree=$.fn.zTree.getZTreeObj("tree");
        for(var i=0,l=!treeNodeP?0:treeNodeP.children.length;i<l; i++){
            if(treeNode!==treeNodeP.children[i]){zTree.expandNode(treeNodeP.children[i],false);}
        };
        while (pNode){
            if(pNode===treeNode){break;}
            pNode=pNode.getParentNode();
        };
        if(!pNode){singlePath(treeNode);}
    };
    function singlePath(newNode) {
        if (newNode === curExpandNode) return;
        if (curExpandNode && curExpandNode.open==true) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            if (newNode.parentTId === curExpandNode.parentTId) {
                zTree.expandNode(curExpandNode, false);
            } else {
                var newParents = [];
                while (newNode) {
                    newNode = newNode.getParentNode();
                    if (newNode === curExpandNode) {
                        newParents = null;
                        break;
                    } else if (newNode) {
                        newParents.push(newNode);
                    }
                }
                if (newParents!=null) {
                    var oldNode = curExpandNode;
                    var oldParents = [];
                    while (oldNode) {
                        oldNode = oldNode.getParentNode();
                        if (oldNode) {
                            oldParents.push(oldNode);
                        }
                    }
                    if (newParents.length>0) {
                        zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
                    } else {
                        zTree.expandNode(oldParents[oldParents.length-1], false);
                    }
                }
            }
        }
        curExpandNode = newNode;
    };
    function onExpand(event,treeId,treeNode){curExpandNode=treeNode;};
    function onClick(e,treeId,treeNode){
        var zTree=$.fn.zTree.getZTreeObj("tree");
        zTree.expandNode(treeNode,null,null,null,true);
    }
    $(function(){
        $.fn.zTree.init($("#tree"),setting,zNodes);
        //$(".ui-layout-north li:first-child").click();
        $("#tree>li:first-child>span.button").click();
    });
</script>

<script type="text/javascript">
    // 点击确认使用
    $("#saveBtn").click(function(){
        var frm = $("#content_body").contents();
        // 将选中的图片拼装数组
        var images_array = [];
        frm.find("#list li").each(function(){
            var val = $(this).attr("data-url");
            if($(this).hasClass("selected")){
                images_array.push(val);
            }
        });
        // 若未选择图片就点确认则提示
        if (!images_array.length) {
            layer.msg('请选择图片~~', {icon: 2,time: 1000});
            return false;
        }
        if('' != callback && 'index.php' != callback){
            var str = "{$info.func}";
            var info = str.replace('.', '');
            function info_call_back(pathObj){}            
        }
        // 调用父级方法，传入图片数据
        var callback = "{$info.func}";
        var inputId = "{$info.inputId}";
        var num = {$info.num};
        if(num > 0){
            if (num == 1 && undefined != images_array[0]) {
                $('#'+inputId, window.parent.document).val(images_array[0]);
                $('#'+inputId+'_box', window.parent.document).html("<dl><dt><img src='"+images_array[0]+"' data-url='"+images_array[0]+"' ></dt><dd>删除</dd></dl>");
            }else if ( num > 1) {
                if($('#'+inputId, window.parent.document).val() ==''){
                    $('#'+inputId, window.parent.document).val(images_array.join(','));
                }else{
                    $('#'+inputId, window.parent.document).val($('#'+inputId, window.parent.document).val()+","+images_array.join(','));
                }
                var html = '';
                for ( var i = 0; i <images_array.length; i++){
                    html += "<dl><dt><img src='"+images_array[i]+"' data-url='"+images_array[i]+"' ></dt><dd>删除</dd></dl>";
                }
                $('#'+inputId+'_box', window.parent.document).append(html);
            }
            window.parent.layer.closeAll();
        }
    });
</script>
<script>
layui.use(['element','upload'], function(){
  var element = layui.element;
  var upload = layui.upload;

  var sitedir=$('#sitedir').data('sitedir');
  var uploadurl = $("#preurl").data('preurl')+'/index/upload';
  //执行多图片上传实例
  var files='';
//   var html='';
  var uploadsInst = upload.render({
	elem: '.uploads' //绑定元素
	,url: uploadurl //上传接口
	,field: 'upload' //字段名称
	,multiple: true//多文件上传
	,accept: 'images' //接收文件类型 images（图片）、file（所有文件）、video（视频）、audio（音频）
	,acceptMime: 'image/*'
	,before: function(obj){ 
	   layer.load(); //上传loading
	}
	,done: function(res){
	   if(res.code==1){
        if(files){
            files+=','+res.data[0];
        }else{
            files+=res.data[0];
        }
		//    html += "<dl><dt><img src='"+sitedir+res.data[0]+"' data-url='"+res.data[0]+"'></dt><dd>删除</dd></dl>";
	   }else{
		   layer.msg('有文件上传失败：'+res.data); 
	   } 
	}
  	,allDone: function(obj){
  		var item = this.item;
  	    var des=$(item).data('des');
  	    layer.closeAll('loading'); //关闭loading
	    if(files!=''){
            var files = '/abc/acb.jpg,/aaa/abc.png';
            var folder = files.substr(0,files.indexOf(','));
            folder = folder.substr(0,folder.lastIndexOf('/')+1);
            layer.msg('成功上传'+obj.successful+'个文件！',{time:500},function(){
                //location.href='{url./admin/Media/media_list}&images_path='+folder;
                location.reload();
            });
	 	   files='';
	 	   //html='';
	    }else{
	 	   layer.msg('全部上传失败！'); 
	    }
	 }
	,error: function(){
		layer.closeAll('loading'); //关闭loading
		layer.msg('上传发生错误！'); 
	}
  });
});
</script>
</body>
</html>